<template>
  <CommonLayoutT current-path="/groups" v-if="groups">
    <div class="header d-flex align-items-center">
      <h5 class="mb-0 mx-auto">群组列表</h5>
      <button class="btn btn-outline-primary" @click="handleNotification">
        <i class="bi bi-bell"></i>
      </button>
    </div>
    <!-- 群组列表 -->
    <div class="group-list-container">
      <div v-for="group in groups" :key="group.id" class="group-item" @click="goToGroupDetail(group.id)">
        <!-- 点击列表数据跳转到详情页面 -->
        <div class="group-info">
          <div class="group-name">{{ group.name }}</div>
          <div class="group-description">{{ group.description }}</div>
        </div>
        <!-- 添加删除按钮 -->
        <button @click.stop="deleteGroup(group.id)" class="delete-btn">删除</button>
      </div>
    </div>
    <!-- 分页按钮 -->
    <div class="pagination d-flex justify-content-center mt-3">
      <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-outline-secondary mr-2">上一页</button>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-outline-secondary">下一页</button>
    </div>
    <!-- 发布问题按钮 -->
    <router-link to="/groups-add" class="floating-btn border-0">
      <i class="bi bi-plus-lg fs-4"></i>
    </router-link>
  </CommonLayoutT>
</template>

<script>
import CommonLayoutT from "@/components/layout/CommonLayoutT.vue";
import http from "@/router/http";
import router from "@/router";
export default {
  name: 'GroupManagementView',
  components: {CommonLayoutT},
  data() {
    return {
      groups: [
        // {
        //   id: 1,
        //   name: '学习交流群',
        //   description: '这是一个用于学习交流的群组，大家可以在这里分享学习心得和资料。'
        // },
        // {
        //   id: 2,
        //   name: '兴趣爱好群',
        //   description: '聚集了各种有相同兴趣爱好的小伙伴，一起讨论感兴趣的话题。'
        // },
        // {
        //   id: 3,
        //   name: '技术讨论群',
        //   description: '专注于技术领域的讨论，欢迎各路技术大神和新手加入。'
        // }
      ],
      currentPage: 1, // 当前页码，初始化为1
      pageSize: 10, // 每页显示的记录数
      totalPages: 0, // 总页数
    };
  },
  mounted() {
    this.getGroups();
  },
  methods: {
    //查询群组列表
    async getGroups() {
      try {
        const requestData = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          status: 1,
          teacherId: localStorage.getItem('userId')
        }
        const response = await http.post(`/admin/groups/findAll/Condition`, requestData);
        this.groups = [];
        // 假设后端接口返回的数据格式包含data和total两个字段
        const total = response.data.response.total;
        const data = response.data.response.list;
        data.forEach(item => {
          this.groups.push({
            id: item.groupId,
            name: item.groupName,
            description: item.groupDescribe,
          })
        })
        this.totalPages = Math.ceil(total / this.pageSize);
      } catch (error) {
        console.error('获取群组数据失败：', error);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.getGroups();
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getGroups();
      }
    },
    handleNotification() {
      this.$router.push('/notificationT')
    },
    // 跳转到群组详情页面
    goToGroupDetail(groupId) {
      router.push(`/groups-edit/${groupId}`);
    },
    // 删除群组
    async deleteGroup(groupId) {
      // 弹出确认框，询问用户是否确认删除
      const isConfirmed = confirm('你确定要删除这个群组吗？');
      if (isConfirmed) {
        try {
          // 发送删除请求，假设后端接口为 /admin/groups/delete
          await http.post(`/admin/groups/deleteBusiness/${groupId}`);
          // 删除成功后重新获取群组列表
          await this.getGroups();
        } catch (error) {
          console.error('删除群组失败：', error);
        }
      }
    }
  }
};
</script>

<style scoped>
.group-management-page {
  background-color: #f0f9f9;
  padding: 20px;
}

.header {
  background: linear-gradient(135deg, #00b8a9 0%, #28df99 100%);
  color: white;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.group-list-container {
  margin-top: 20px;
}

.group-item {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-info {
  display: flex;
  flex-direction: column;
}

.group-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.group-description {
  color: #6c757d;
}

.floating-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: #00b8a9;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.delete-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}
</style>